﻿body {
    max-width: 1700px;

}

#header{
    text-align: center;
    width: 100%;
       }

.background{
    position: relative;
    border-bottom: solid 30px Burlywood;
    opacity: 0.8
}

.caregroup{
    position:absolute;
    top: 60px;
    left: 180px;
}

.georgeboom{
    position:absolute;
    top: 300px;
    left: 180px;

}

.miller{
    position:absolute;
    top: 300px;
    left: 600px;
}

.introduction{
    margin-top: 5%;
    margin-left: 15%;
    float: left;
    width: 30%;
}

.introduction-aside h2{
    margin-top: 10%;
    margin-bottom: 10%;
    text-align: center;
    float: right;
    width: 53%;
    line-height: 35px;
}

.clearfix {
    clear: both;
}

.explaination{
    margin-left: 30%;
    float: left;
    width: 25%;
}

.explaination-aside{
    width: 40%;
    float: right;
    margin-top: 2%
}


li{
    margin-right: 10%;
}

.staff-description h3{
    text-align: center;
    margin: 5% 0 0 10%
}
.staff{
    margin-left:10%;
}

.staff img{
    width: 15%;
    margin-left: 4%;
    margin-top: 2%;
}

@media screen and (max-width:1500px){
#header{
    text-align: center;
    width: 100%;
       }

.background{
    width: 100%;
    position: relative;
    border-bottom: solid 30px Burlywood;
    opacity: 0.8
}

.caregroup{
    width: 35%;
    position:absolute;
    top: 40px;
    left: 100px;
}

.georgeboom{
    width: 18%;
    position:absolute;
    top: 220px;
    left: 80px;

}

.miller{
    width: 18%;
    position:absolute;
    top: 220px;
    left: 375px;
}
.introduction img{
    width: 75%;
}
.introduction{
    margin-top: 5%;
    margin-left: 5%;
    float: left;
    width: 30%;
}

.introduction-aside h2{
    margin: 10% 4% 10% 0;
    text-align: center;
    float: right;
    width: 60%;
    line-height: 35px;
}

.clearfix {
    clear: both;
}

.explaination img{
    width: 90%;
}
.explaination{
    margin-left: 25%;
    float: left;
    width: 25%;
}

.explaination-aside{
    width: 50%;
    float: right;
    margin-top: 2%
}


li{
    margin-right: 10%;
}

.staff-description h3{
    text-align: center;
    margin: 5% 0 0 0;
}
.staff{
    margin-left: 5%;
}

.staff img{
    width: 15%;
    margin-left: 3%;
    margin-top: 2%;
}
}

@media screen and (max-width:1240px){
    #header{
    text-align: center;
    width: 100%;
       }

.background{
    width: 100%;
    position: relative;
    border-bottom: solid 30px Burlywood;
    opacity: 0.8
}

.caregroup{
    width: 40%;
    position:absolute;
    top: 40px;
    left: 95px;
}

.georgeboom{
    width: 20%;
    position:absolute;
    top: 200px;
    left: 80px;

}

.miller{
    width: 20%;
    position:absolute;
    top: 200px;
    left: 350px;
}
.introduction img{
    width: 75%;
}
.introduction{
    margin-top: 5%;
    margin-left: 5%;
    float: left;
    width: 30%;
}

.introduction-aside h2{
    margin: 10% 4% 10% 0;
    text-align: center;
    float: right;
    width: 60%;
    line-height: 35px;
}

.clearfix {
    clear: both;
}

.explaination img{
    width: 90%;
}
.explaination{
    margin-left: 25%;
    float: left;
    width: 25%;
}

.explaination-aside{
    width: 50%;
    float: right;
    margin-top: 2%
}


li{
    margin-right: 10%;
}

.staff-description h3{
    text-align: center;
    margin: 5% 0 0 0;
    font-size: 16px;
}

.staff{
    margin-left: 3%;
}

.staff img{
    width: 15%;
    margin-left: 3%;
    margin-top: 2%;
}
}
@media screen and (max-width:992px){
#header{
    text-align: center;
    width: 100%;
       }

.background{
    width: 100%;
    position: relative;
    border-bottom: solid 30px Burlywood;
    opacity: 0.8
}

.caregroup{
    width: 35%;
    position:absolute;
    top: 40px;
    left: 95px;
}

.georgeboom{
    width: 20%;
    position:absolute;
    top: 160px;
    left: 60px;

}

.miller{
    width: 20%;
    position:absolute;
    top: 160px;
    left: 300px;
}
.introduction img{
    width: 80%;
}
.introduction{
    margin-top: 5%;
    margin-left: 5%;
    float: left;
    width: 30%;
}

.introduction-aside h2{
    font-size: 20px;
    margin: 9% 5% 5% 0;
    text-align: center;
    float: right;
    width: 60%;
    line-height: 35px;
}

.clearfix {
    clear: both;
}

.explaination img{
    width: 100%;
}
.explaination{
    margin-left: 15%;
    margin-top: 5%;
    float: left;
    width: 25%;
}

.explaination-aside{
    width: 50%;
    float: right;
    margin-right: 40px;
}
.explaination-aside h3{
    font-size: 17px;
}

li{
    margin-right: 10%;
    font-size: 14px;
}

.staff-description h3{
    text-align: center;
    margin: 5% 8% 0 8%;
    font-size: 17px;
}

.staff{
    margin-left: 3%;
}

.staff img{
    width: 15%;
    margin-left: 3%;
    margin-top: 2%;
}

}
@media screen and (max-width:768px){
#header{
    text-align: center;
    width: 100%;
       }

.background{
    width: 100%;
    position: relative;
    border-bottom: solid 30px Burlywood;
    opacity: 0.8
}

.caregroup{
    width: 35%;
    position:absolute;
    top: 30px;
    left: 75px;
}

.georgeboom{
    width: 20%;
    position:absolute;
    top: 120px;
    left: 45px;

}

.miller{
    width: 20%;
    position:absolute;
    top: 120px;
    left: 225px;
}
.introduction img{
    width: 80%;
}
.introduction{
    margin-top: 5%;
    margin-left: 5%;
    float: left;
    width: 30%;
}

.introduction-aside h2{
    font-size: 18px;
    margin: 7% 5% 5% 0;
    text-align: center;
    float: right;
    width: 60%;
    line-height: 25px;
}

.clearfix {
    clear: both;
}

.explaination img{
    width: 100%;
}
.explaination{
    margin-left: 15%;
    margin-top: 5%;
    float: left;
    width: 25%;
}

.explaination-aside{
    width: 50%;
    float: right;
    margin-right: 25px;
}
.explaination-aside h3{
    font-size: 15px;
}

li{
    margin-right: 5%;
    font-size: 13px;
}

.staff-description h3{
    text-align: center;
    margin: 5% 9% 0 10%;
    font-size: 17px;
}

.staff{
    margin-left: 3%;
}

.staff img{
    width: 15%;
    margin-left: 3%;
    margin-top: 2%;
}
}
@media screen and (max-width:480px){
#header{
    text-align: center;
    width: 100%;
       }

.background{
    width: 100%;
    position: relative;
    border-bottom: solid 10px Burlywood;
    opacity: 0.7
}

.caregroup{
    width: 40%;
    position:absolute;
    top: 25px;
    left: 52px;
}

.georgeboom{
    width: 20%;
    position:absolute;
    top: 80px;
    left: 40px;

}

.miller{
    width: 20%;
    position:absolute;
    top: 80px;
    left: 155px;
}
.introduction img{
    width: 100%;
}
.introduction{
    margin-top: 10%;
    margin-left: 5%;
    float: left;
    width: 30%;
}

.introduction-aside h2{
    font-size: 16px;
    margin: 7% 5% 5% 0;
    text-align: center;
    float: right;
    width: 60%;
    line-height: 25px;
}

.clearfix {
    clear: both;
}

.explaination img{
    width: 100%;
}
.explaination{
    margin: 7% 0 5% 5%;
    float: left;
    width: 30%;
}

.explaination-aside{
    width: 55%;
    float: right;
    margin-right: 25px;
}
.explaination-aside h3{
    font-size: 14px;
}

li{
    margin-right: 5%;
    font-size: 12px;
}

.staff-description h3{
    text-align: center;
    margin: 5% 15% 0 8%;
    font-size: 15px;
}

.staff{
    margin-left: 3%;
}

.staff img{
    width: 25%;
    margin-left: 5%;
    margin-top: 2%;
}
}
@media screen and (max-width:320px){

#header{
    text-align: center;
    width: 100%;
       }

.background{
    display:none;
}

.caregroup{
    width: 75%;
    position:absolute;
    top: 20px;
    left: 40px;
}

.georgeboom{
    width: 40%;
    position:absolute;
    top: 100px;
    left: 20px;

}

.miller{
    width: 40%;
    position:absolute;
    top: 100px;
    left: 165px;
}

.introduction img{
    width: 75%;
}
.introduction{
    margin-top: 50%;
    margin-left: 12%;
    width: 100%;
}

.introduction-aside h2{
    font-size: 16px;
    margin: 3% 0 5% 0;
    text-align: center;
    width: 100%;
    line-height: 25px;
}

.clearfix {
    clear: both;
}

.explaination img{
    width: 75%;
}
.explaination{
    margin: 7% 0 0 13%;
    width: 100%;
}

.explaination-aside{
    width: 100%;
    margin-right:0;
}
.explaination-aside h3{
    font-size: 15px;
}

li{
    margin-right: 5%;
    font-size: 13px;
}

.staff-description h3{
    text-align: center;
    margin: 5% 15% 0 8%;
    font-size: 15px;
}

.staff{
    margin-left: 5%;
}
.staff h2{
    margin-left: 5%;
}

.staff img{
    width: 40%;
    margin-left: 3%;
    margin-top: 8%;
}
}
